<template>
  <div id="TeacherList">
    <y-header></y-header>
  <!--讲师列表 -->
   <div class="teacherlist_page">
    <div class="teacher_content">
      <ul>
      <!-- :to="{name: 'teacher-id', params: {id: item.id}}" -->
        <li v-for="(item,index) in teacherList" :key="index">
          <nuxt-link target="_blank"  :to="{}" class="teacher_info">
            <div class="img_box">
              <img   :src="item.headImgUrl" alt="">
            </div>

            <div class="msg">
            <p>讲师姓名：{{item.lecturerName}}</p>
            <div class="intro">
            <p>个人简介：</p>
            <br>
            &nbsp&nbsp&nbsp&nbsp&nbsp{{item.introduce}}
            </div> 
            </div>
            <el-button type="info" class="more">查看详细资料</el-button>         
          </nuxt-link>
        </li>
      </ul>
      
    </div>
    <y-footer></y-footer>
  </div>
  </div>
</template>
 <script>
  import YHeader from '~/components/common/Header'
  import YFooter from '~/components/common/Footer'
  import YButton from '~/components/common/CodeButton'
  import {teacherEnter} from '~/api/user.js'
  import {uploadPic} from '~/api/upload.js'
  import {getLecturerInfoAudit, updataLecturerInfoAudit} from '~/api/account/user.js'
  import {myHttp} from '~/utils/myhttp.js'

export default {
  head () {
      return {
        title: this.applyTitle,
        meta: [
            {
                hid: 'keywords',
                name: 'keywords',
                content: this.$store.state.webInfo.websiteKeyword
            },
            {
                hid: 'description',
                name: 'description',
                content: this.$store.state.webInfo.websiteDesc
            }
        ]
      }
  },
  data () {
    return {
      teacherList:[
        {
          headImgUrl:'https://cllearning.oss-cn-shenzhen.aliyuncs.com/course/76a242408682477a9dcbe7c93bddc81a.jpeg',
          lecturerName:'张杰',
          lecturerMobile:'13800138001',
          lecturerEmail:'297115770@qq.com',
          introduce:'张杰(Jason Zhang),1982年12月20日出生于四川省成都市,中国流行男歌手.2004年参加歌唱类选秀《我型我秀》,获得全国总冠军并出道。2007年参加歌唱类选秀《快乐男声》,获得总决赛第四名;随后发行的EP《最美的太阳》拿下亚马逊年度唱片销量冠军。2008年发行专辑《明天过后》,凭借该专辑获得北京流行音乐典礼11项提名。2010年发行专辑《这,就是爱》;同年获得韩国MAMA亚洲最佳歌手奖。2012年在人民大会堂开启个人首轮巡演; 同年获得湖南省“五个一”工程奖。2013年首次参加央视春晚,演唱歌曲《给我你的爱》。'

        },
        {
          headImgUrl:'https://cllearning.oss-cn-shenzhen.aliyuncs.com/course/76a242408682477a9dcbe7c93bddc81a.jpeg',
          lecturerName:'CHEN',
          lecturerMobile:'18370093079',
          lecturerEmail:'18370093079@qq.com',
          introduce:'胡歌曾经将电影《心灵捕手》看了好几遍。影片中，马特·达蒙饰演的那位天才过目不忘，有着常人没有的天赋，却是问题少年。挖掘他的人，认为他肯定可以做到一个令人望尘莫及的高度。但天才少年永远不愿意迈出他原本的、熟悉的那个圈子。胡歌觉得,自己其实也有一点这样的性格。出道17年、今天刚满39周岁,回顾胡歌的演艺之路,他一如既往地敏感、克制,对自我的审查异常严格。胡歌似乎永远在反思,自己到底配得上大家的喜爱吗?'
        }
      ]
    }
  },

  methods:{
    getByTeacher () {
      myHttp.call(this, {
        method: getLecturerInfo,
        //params: {lecturerUserNo: this.$store.state.userInfo.userNo}
      }).then(res => {
        this.teacherInfo = res.data;
        this.intro.txt.html(this.teacherInfo.introduce)
        
        this.teacherList.push(this.teacherInfo);
        
      })
  }
  },
       
  mounted () {
    let E = require('wangeditor')
    this.editor2 = new E('#lecturerInfo')
    this.editor2.customConfig.uploadImgMaxLength = 1
    this.editor2.customConfig.customUploadImg = this.editorUpload
    this.editor2.create();
  },
  components: {
    YButton,
    YHeader,
    YFooter
  }  
}

</script>

<style lang="scss" rel="stylesheet/scss">
.teacherlist_page {
 
  .teacher_content {
    background: rgb(245,245,245);
    padding: 30px 0 10px 0;
    margin-left:165px;
    position:relative;
    .msg{
      position:absolute;
      padding-top:10px;
      margin-left:240px;
      .intro{
        font-size:15px;
        width:700px;
        
      }
    }
    ul p{
      font-size: 18px;
      margin-top: 10px;
      color:#CD853F;
      //color:#778899;
      font-weight: bold;
    }
    ul {
      width: 1200px;
      margin: 0 auto;
      
    }
    li {
      width:1000px;
      //float: left;
      border-radius: 15px;
      background: #fff;
      margin: 0px 20px 20px 0px;
      background-color:#FAFAD2;
     
    }
  }
  .teacher_info {
    display: block;
    width: 1000px;
    height: 240px;
    border-radius: 6px;
    position: relative;
  
    .img_box {
      float:left;
      position: relative;
      width: 180px;
      height: 180px;
      //background-color:yellow;
      border-radius:90px;
      margin-left:30px;
      margin-top:20px;
      .teacher_img {
        width: 180px;
        height: 180px;
        //border-radius:130px;
        //border-radius: 6px 6px 0 0;
        
        background-repeat: no-repeat;
        margin-top:20px;
      }
    }
    p {
      font-size: 16px;
      margin-top: 5px;
      padding: 0 10px;
      word-break: break-all;
    }
    .more{
      margin-top:20px;
        margin-left:640px;
        position:absolute;
        opacity:0.6;
      }
    
  }
}
</style>
